<template>
  <view>
    <view class="my-tags-box">
      <view class="title1">我的标签</view>
      <view class="tagsContainer">
        <view class="my-tags" v-for="(tag, index) in filteredTags" :key="index">
          {{ tag }}
          <!-- 叉叉删除按钮 -->
          <button class="deleteTagButton" @click="deleteTag(index)">
            <image src="/static/my-icons/deleteTag.png" mode="'aspectFit'" />
          </button>
        </view>
      </view>
    </view>
    <view class="hot-tags-box">
      <view class="title1">推荐标签</view>
      <view class="tagsContainer2">
        <view
          v-for="(tag, index) in hotTags"
          :key="index"
          class="hot-tags"
          :class="{ selected: selectedTags.includes(tag) }"
          @click="selectTag(tag)"
        >
          {{ tag }}
        </view>
        <view class="tagButton2">
          <button class="tagButton" @click="showPopup">+自定义标签</button>
        </view>
      </view>
    </view>
    <!-- 添加 ref 属性 -->
    <uni-popup ref="tagPopup">
      <!-- 弹出内容 -->
    </uni-popup>
    <!-- 弹出框 -->
    <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog
          type="info"
          title="自定义标签"
          content="请输入标签"
          :before-close="true"
          @confirm="confirmTags()"
          @close="cancelTags"
        >
          <input
            class="tagInput"
            v-model="tagInputs"
            placeholder="请输入标签"
          />
        </uni-popup-dialog>
      </uni-popup>
    <!-- 添加确认修改按钮 -->
     <view class="confirmButtonContainer">
    <button class="confirmButton" @click="sendTagsToBackend">确认修改</button>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tags: [],
      hotTags: [],
      selectedTags: [], // 添加 selectedTags 属性
    };
  },
  computed: {
    filteredTags() {
      return this.tags.slice(1); // 过滤掉第一个标签
    }
  },
  onLoad(options) {
    // 将 options.tags 从字符串解析为数组
    this.tags = Array.isArray(options.tags)
      ? options.tags
      : options.tags.split(",");
    console.log(this.tags);
    this.fetchTags();
  },
  methods: {
    confirmHotTags() {
      this.tags = [...new Set([...this.tags, ...this.selectedTags])]; // 合并已选标签和自定义标签
      this.selectedTags = []; // 清空选中标签
      if (this.$refs.tagPopup) { // 检查 tagPopup 是否存在
        this.$refs.tagPopup.close();
      }
    },
    // 删除对应索引的标签
    deleteTag(index) {
      this.tags.splice(index + 1, 1); // 注意这里需要调整索引
    },

    selectTag(tag) {
      if (this.selectedTags.includes(tag)) {
        this.selectedTags = this.selectedTags.filter((t) => t !== tag);
      } else {
        this.selectedTags.push(tag);
        this.tags.push(tag); // 添加选中的标签到我的标签中
      }
      this.confirmHotTags();
    },
    // 获取热门标签列表
    async fetchTags() {
      try {
        const res = await uni.$http.get("/tag/getHotTags"); // 请求后端获取标签数据
        if (res.data.code === 200) {
          console.log("获取热门标签成功", res.data);
          this.hotTags = res.data.data; // 假设后端返回的标签数据为hotTags数组
        } else {
          console.error("获取标签失败");
        }
      } catch (error) {
        console.error("请求标签失败", error);
      }
    },
     // 点击自定义标签时弹出选择框
     showPopup() {
      this.tagInputs = "";
      this.$refs.popup.open(); // 打开弹出框
    },
    confirmTags() {
      if (this.tagInputs.trim()) {
        this.tags = [...new Set([...this.tags, this.tagInputs.trim()])]; // 合并已选标签和自定义标签
      }
      this.$refs.popup.close();
    },
    cancelTags() {
      this.$refs.popup.close();
    },
    // 发送标签到后端并返回上一个页面
    async sendTagsToBackend() {
      const userId = uni.getStorageSync('userId')
      try {
        const res = await uni.$http.put(`/tag/updateTags?tags=${this.tags}&userId=${userId}`); // 请求后端更新标签数据
        if (res.data.code === 200) {
          console.log("更新标签成功", res.data);
          uni.removeStorageSync("userTags")
          uni.navigateBack(); // 返回上一个页面
        } else {
          console.error("更新标签失败");
        }
      } catch (error) {
        console.error("请求更新标签失败", error);
      }
    },
  },
};
</script>

<style lang="scss">
page {
    background-color: white;
}
.my-tags-box {
  padding-left: 5px;
  padding-right: 5px;
  .tagsContainer {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 5px;
    .my-tags {
      height: 30px;
      background-color: #fbd269;
      color: white;
      margin-left: 0;
      font-size: 16px;
      border-radius: 20px;
      display: flex; /* 新增: 使用 flex 布局 */
      align-items: center; /* 新增: 垂直居中 */
      justify-content: center; /* 新增: 水平居中 */
      padding: 0 10px; /* 新增: 添加左右内边距 */

      .deleteTagButton {
        padding: 0; /* 移除按钮的内边距 */
        border: none; /* 移除按钮的边框 */
        display: grid;
        place-items: center; /* 水平和垂直居中 */
        width: 20px;
        height: 20px;
        margin-left: 3px;
        background: none;
        border-radius: 50%;

        image {
          display: block; /* 使图片表现为块级元素 */
          width: 100%; /* 图片宽度撑满按钮 */
          height: 100%; /* 图片高度撑满按钮 */
          object-fit: cover; /* 保持图片比例并覆盖整个按钮 */
        }
      }
    }
  }
}

.hot-tags-box {
  padding-left: 5px;
  padding-right: 5px;
    margin-top: 20px;
  .tagsContainer2 {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 5px;
    .hot-tags {
    height: 30px;
    background-color: #f1f1f1;
    color: rgb(107, 107, 107);
    margin-left: 0;
    font-size: 16px;
    border-radius: 20px;
    display: flex; /* 新增: 使用 flex 布局 */
    align-items: center; /* 新增: 垂直居中 */
    justify-content: center; /* 新增: 水平居中 */
    padding: 0 10px; /* 新增: 添加左右内边距 */
    &.selected {
      background-color: #fbd269; // 选中标签背景颜色变为黄色
    }
  }
  }
  
}
.title1 {
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #525252;
  }
.tagButton2 {
  display: flex;
  background: none;
  width: auto;
  gap: 5px;
}
.tagButton {
  height: 30px;
  background-color: #f1f1f1;
  margin-left: 0;
  font-size: 16px;
  border-radius: 20px;
  display: flex; /* 新增: 使用 flex 布局 */
  align-items: center; /* 新增: 垂直居中 */
  justify-content: center; /* 新增: 水平居中 */
  padding: 0 10px; /* 新增: 添加左右内边距 */
}
.tagInput {
  width: auto;
  border-radius: 5px;
  padding: 5px 5px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(179, 175, 175);
}
.confirmButtonContainer {
  padding-top: 5px;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1000; // 确保按钮在最上层
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);

  .confirmButton {
    width: 90%;
  height: 90%;
  font-size: 17px;
  color: rgb(96, 96, 96);
  background-color: #fbd269;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.171);
  border: none;
  text-align: center;
  border-radius: 40px;
  }

}
</style>